<template>
  <div>
    <head-top></head-top>
    <vodal :show="show" :animation="anim" @hide="show = false" :duration="speed" :width="w" :height="h">
      <div>A vue modal with animations.sdfgdgdsgds</div>
      <img src="http://www.openinstall.io/images/liucheng.png" style="max-width: 100%">
      <p>sdfsddfsdfdsdsf</p>
    </vodal>
    <button @click="clearC" class="btn">
      清除cookiesdf
    </button>
  </div>
</template>

<script>
  import Vodal from 'vodal';
  import {getUserInfo , login} from '../../service/getData'
  import {getStore, setStore, removeStore , setCookie , getCookie , clearCookie , checkCookie} from '../../config/mUtils'
  import headTop from '../../components/header/head'


  export default {
    data(){
      return{
        show: false,
        speed:500,
        anim:'rotate',
        w:700,
        h:400
      }
    },
    async beforeMount(){

    },
    mounted(){
      /*checkCookie("token");*/
      login('1','2');

    },
    watch:{
    }
    ,
    components:{
      Vodal,headTop
    },
    computed:{
    },
    methods:{
      clearC: function () {
        /*clearCookie("token");*/
        this.show = true;
      }
    }
  }
</script>

<style lang="less" scoped>
  .btn{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 1em 1.5em;
    margin-right: 0.5em;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 1px 1px 4px #999;
    border-radius: 3px;
    font-size: 1em;
    text-shadow: 1px 2px 0px rgba(255,255,255,0.9);
    color: black;
    border: 1px solid #aaa;
    background-color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));
    background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
    background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
    background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
    background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
    background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
  }
  .btn:active{
    outline: none;
    background-color: #eaeaea;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaeaea), color-stop(100%, #cbcbcb));
    background: -webkit-linear-gradient(top, #eaeaea 0%, #cbcbcb 100%);
    background: -moz-linear-gradient(top, #eaeaea 0%, #cbcbcb 100%);
    background: -ms-linear-gradient(top, #eaeaea 0%, #cbcbcb 100%);
    background: -o-linear-gradient(top, #eaeaea 0%, #cbcbcb 100%);
    background: linear-gradient(to bottom, #eaeaea 0%, #cbcbcb 100%);
    box-shadow: inset 0 0 3px #111
  }
  .btn:hover{
    background-color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #d0d0d0));
    background: -webkit-linear-gradient(top, #fff 0%, #d0d0d0 100%);
    background: -moz-linear-gradient(top, #fff 0%, #d0d0d0 100%);
    background: -ms-linear-gradient(top, #fff 0%, #d0d0d0 100%);
    background: -o-linear-gradient(top, #fff 0%, #d0d0d0 100%);
    background: linear-gradient(to bottom, #fff 0%, #d0d0d0 100%);
    box-shadow: 0px 0px 2px #999
  }
</style>
